<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <FormItem :form_column="form_column" :queryParams="queryParams" @handleQuery="handleQuery" @resetQuery="resetQuery" />
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <Table :tableTitle="column" :tableData="housingList" :pagination="pagination" @getPageTable="getList" @getSize="getList" @handleSelectionChange="handleSelectionChange" :mutiSelect="true">
      <div slot="operate">
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click.native.prevent="handleUpdate(scope.row)">
              修改租金
            </el-button>
            <el-button size="mini" type="text" @click.native.prevent="operateDetail(scope.$index, PRList)">
              现场实景
            </el-button>
          </template>
        </el-table-column>
      </div>
    </Table>
    <!-- 修改租金弹窗 -->
    <Rent ref="rent" />
  </div>
</template>

<script>
import FormItem from '../components/formItem'
import Table from '../components/table'
import Rent from './handle/rent.vue'

export default {
  name: "housing",
  dicts: ['sys_yes_no'],
  components: { FormItem, Table, Rent },
  data() {
    return {
      column: [],
      form_column: [
        { title: '地址', prop: 'dz', type: 'input', placeholder: '请输入地址', width: '150px' },
        { title: '是否已租', prop: 'sfyz', type: 'select', placeholder: '请选择是否已租', width: '150px', options: [] },
        { title: '状态', prop: 'zt', type: 'select', placeholder: '请选择状态', width: '150px' },
        { title: '租金范围', prop: 'zjfw', type: 'select', placeholder: '请选择组件范围', width: '150px' },
        { title: '级别', prop: 'jb', type: 'select', placeholder: '请选择级别', width: '150px' },
        { title: '类型', prop: 'lx', type: 'select', placeholder: '请选择类型', width: '150px', options: [] },
        { title: '层数', prop: 'cs', type: 'select', placeholder: '请选择层数', width: '150px', options: [] },
        { title: '面积', prop: 'mj', type: 'select', placeholder: '请选择面积', width: '150px', options: [] },
        { title: '朝向', prop: 'cx', type: 'select', placeholder: '请选择朝向', width: '150px', options: [] },
        { title: '独立上下水', prop: 'dlsxs', type: 'select', placeholder: '请选择独立上下水', width: '150px', options: [] },
        { title: '独卫', prop: 'dc', type: 'select', placeholder: '请选择独卫', width: '150px', options: [] },
        { title: '独厨', prop: 'dw', type: 'select', placeholder: '请选择独厨', width: '150px ', options: [] },
      ],
      
      loading: true,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      housingList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      // 查询参数
      queryParams: {
        dz: null,
        sfyz: null,
        zt: null,
        dz: null,
        zj: null,
        dj: null,
        lx: null,
        cs: null,
        dw: null,
        dc: null,
        dz: null,
        mjcx: null,
        sxs: null
      },
    };
  },
  created() {
    this.initDict()
    this.initTable()
    this.getList();
  },
  methods: {
    /*初始化字典值 */
    initDict() {
      this.form_column.filter(item => item.options).map(item => {
        if (item.title === '是否已租' || item.title === '独卫' || item.title === '独厨') {
          item.options = this.dict.type['sys_yes_no']
        }
      })
    },
    /*初始化表格 */
    initTable() {
      let that = this
      this.column = [{
        label: '序号', prop: 'xh', render: (h, params) => {
          return h('span', params.index + that.pagination.pageSize * (that.pagination.pageNum - 1) + 1)
        }
      },
      {
        label: '是否已租', prop: 'sfyz', render: (h, params) => {
          return h('dict-tag', {
            props: {
              options: this.dict.type.sys_yes_no,
              value: 'Y'
            },
          })
        }
      },
      { label: '状态', prop: 'zt' },
      { label: '地址', prop: 'dz' },
      { label: '租金', prop: 'zj' },
      { label: '等级', prop: 'dj' },
      { label: '类型', prop: 'lx' },
      { label: '层数', prop: 'cs' },
      { label: '面积朝向', prop: 'mjcx' },
      { label: '上下水', prop: 'sxs' },
      {
        label: '独卫', prop: 'dw', render: (h, params) => {
          return h('dict-tag', {
            props: {
              options: this.dict.type.sys_yes_no,
              value: 'Y'
            },
          })
        }
      },
      {
        label: '独厨', prop: 'dc', render: (h, params) => {
          return h('dict-tag', {
            props: {
              options: this.dict.type.sys_yes_no,
              value: 'Y'
            },
          })
        }
      },
      ]
    },
    /** 查询列表接口 */
    getList() {
      this.housingList = [{ sfyz: 'Y', zt: '状态', dz: '邯郸', zj: '租金', dj: '一级', dw: 'Y', dc: 'Y' }]
      this.pagination.total = this.housingList.length
    },

    /** 搜索按钮操作 */
    handleQuery() {
      console.log(this.queryParams)
      // this.queryParams.pageNum = 1;
      // this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dictId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },

    /** 修改租金操作 */
    handleUpdate(row) {
      this.$refs.rent.init(row)
    },

  }
};
</script>